
const { useState, useEffect } = React;
const { Button, Space, Input, Tag, List, Typography, message, Modal, Form, Table } = antd;



function PtList({ data, onEdit, onDelete }) {
  const [tags, setTags] = React.useState([]);
  const [filteredData, setFilteredData] = React.useState([]);

  const columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '内容', dataIndex: 'content' },
    { 
      title: '标签', 
      dataIndex: 'tags',
      render: tags => tags.map(tag => <Tag key={tag}>{tag}</Tag>)
    },
    {
      title: '操作',
      render: (_, record) => (
        <Button.Group>
          <Button onClick={() => onEdit(record)}>编辑</Button>
          <Button danger onClick={() => onDelete(record.id)}>删除</Button>
        </Button.Group>
      )
    }
  ];

  React.useEffect(() => {
    if (tags.length) {
      db.prompts.where('tags').anyOf(tags).toArray().then(setFilteredData);
    } else {
      setFilteredData(data);
    }
  }, [tags, data]);

  return (
    <div>
      <Select
        mode="tags"
        style={{ width: 300, marginBottom: 16 }}
        placeholder="过滤标签"
        onChange={setTags}
      />
      <Table 
        columns={columns} 
        dataSource={filteredData} 
        rowKey="id"
      />
    </div>
  );
}
